<form role="form" class="sky-form" id="login" method="post">

    <div class="form-group">
        <label>账号</label>

        <input type="text" name="usernamelogin" class="form-control" placeholder="邮箱/手机号/昵称" required="">

    </div>
    <div class="form-group">
        <label>密码</label>

        <input type="password" name="passwordlogin" class="form-control" placeholder="密码" required="">
        <div class="clearfix note">
            <a href="#" class="pull-right">忘记密码?</a>
        </div>
    </div>
    <!--是否开启验证码-->
    <div class="form-group">
        <div id="captcha">
            <p id="wait" class="">正在加载验证码......</p>
        </div>
    </div>

    <div id="alert"></div>
    <div class="row">

        <div class="col-md-6 col-sm-6 col-xs-6">
            <label class="checkbox weight-300 margin-top-10">
                <input type="checkbox" name="checkbox-inline">
                <i></i> 记住我
            </label>

        </div>

        <div class="col-md-6 col-sm-6 col-xs-6 text-right">

            <button class="btn btn-primary" id="validate-submit">登录</button>

        </div>

    </div>

</form>
<!-- 引入封装了failback的接口--initGeetest -->
<script src="/static/admin/js/gt.js"></script>
<script>
  var handler = function (captchaObj) {
    captchaObj.appendTo('#captcha');
    captchaObj.onReady(function () {
      $("#wait").hide();
    });
    $('#validate-submit').click(function () {
      var result = captchaObj.getValidate();
      if (!result) {
        _toastr("请先完成验证!","top-right","error",false);
        return false;
      }
      $.ajax({
        url: '/center/public/login',
        type: 'POST',
        dataType: 'json',
        data: {
          username: $("input[name='usernamelogin']").val(),
          password: $("input[name='passwordlogin']").val(),
          geetest_challenge: result.geetest_challenge,
          geetest_validate: result.geetest_validate,
          geetest_seccode: result.geetest_seccode
        },
        success: function (data) {
          if (data && (data.errno < 0)) {
            _toastr(data.errmsg,"top-right","error",false);
            captchaObj.reset();

          } else {
            location.reload();
          }

        }
      });
      return false;
    })
    // 更多接口说明请参见：http://docs.geetest.com/install/client/web-front/
  };


  $.ajax({
    url: "/ext/geetest/index/geetest?t=" + (new Date()).getTime(), // 加随机数防止缓存
    type: "get",
    dataType: "json",
    success: function (data) {

      // 调用 initGeetest 进行初始化
      // 参数1：配置参数
      // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
      initGeetest({
        // 以下 4 个配置参数为必须，不能缺少
        gt: data.gt,
        challenge: data.challenge,
        offline: !data.success, // 表示用户后台检测极验服务器是否宕机
        new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机

        product: "float", // 产品形式，包括：float，popup
        width: "100%"
        // 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
      }, handler);
    }
  });
</script>